<!--
 * @Author: fengxx
 * @Date: 2025-08-07 16:02:05
 * @LastEditors: fengxx
 * @LastEditTime: 2025-08-19 16:26:47
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .header {
        display: flex;
        justify-content: space-between;
      }
      .user {
        width: 100px;
      }
      .user:hover .menu {
        display: block;
      }
      .menu {
        display: none;
        cursor: pointer;
      }
      li {
        list-style: none;
      }
      #page-wrap li {
        display: inline-block;
      }
      .page-btn {
        border: 1px solid #ddd;
        padding: 5px;
        margin: 0 5px;
        cursor: pointer;
        user-select: none;
      }
      .active {
        border-color: red;
        color: red;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="header">
        <div></div>
        <div class="user">
          <div id="user"></div>
          <div class="menu">
            <div>修改密码</div>
            <div id="logOut">退出登录</div>
          </div>
        </div>
      </div>
    </header>
    <section>
      <ul id="list-wrap"></ul>
      <ul id="page-wrap"></ul>
    </section>
    <script>
      // console.log(localStorage.getItem("username"));
      document.getElementById("user").innerHTML =
        localStorage.getItem("username");
      document.getElementById("logOut").addEventListener("click", function () {
        localStorage.clear();
        removeCookie("isLogin");
        location.href = "login.html";
      });

      //封装设置cookie
      function setCookie(key, val, timer) {
        //key: 键 （cookie中的Name）
        //val: 值 （cookie中的Value）
        //timer: 时间戳 （cookie中的Expires）
        var date = new Date();
        date.setDate(date.getDate() + timer);
        //设置cookie
        //document.cookie = key + '=' + val + ';expires=' +  date
        //escape()转码：用来对函数进行编码,将一些特殊符号使用16进制表示
        //unescape()解码:当使用escape()进行编码后，需要使用unescape()进行解码到原来的cookie
        //encodeURIComponent(): 进行编码
        //decodeURIComponent(): 进行解码
        //document.cookie = key + '=' + escape(val) + ";expires=" +  date
        document.cookie =
          key + "=" + encodeURIComponent(val) + ";expires=" + date;
      }

      // 封装删除cookie
      function removeCookie(key) {
        setCookie(key, "⼩明", -3); //原理时当前key的过期时间
      }
    </script>
    <script src="home.js"></script>
  </body>
</html>
